Chart.js এ চার্টের ফিল বা অভ্যন্তরীণ রঙ কাস্টমাইজ করতে আপনি Gradient Fill এবং Pattern Fill ব্যবহার করতে পারেন। এই দুটি টেকনিক Chart.js এ আরও আকর্ষণীয় এবং পেশাদারী ভিজ্যুয়াল তৈরি করতে সহায়তা করে। নিচে এই দুটি কাস্টম ফিল সম্পর্কে বিস্তারিত আলোচনা করা হলো।
1. Gradient Fill (গ্রেডিয়েন্ট ফিল)
Gradient Fill হল একটি রঙের পরিবর্তন যেটি একটি পয়েন্ট থেকে আরেকটি পয়েন্টে ধীরে ধীরে পরিবর্তিত হয়। আপনি এই গ্রেডিয়েন্টকে বিভিন্ন ধরনের Chart.js-এ ব্যবহার করতে পারেন, যেমন Bar Chart, Line Chart ইত্যাদি।
উদাহরণ: Line Chart এর Gradient Fill
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Gradient Fill</title>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
const ctx = document.getElementById('myChart').getContext('2d');
// Create gradient
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(255, 99, 132, 0.2)');
gradient.addColorStop(1, 'rgba(75, 192, 192, 0.2)');
const myChart = new Chart(ctx, {
type: 'line', // Line chart
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2],
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: gradient, // Use the gradient as background color
fill: true, // Fill the area under the line
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
ব্যাখ্যা:
createLinearGradient(): এটি গ্রেডিয়েন্ট তৈরির জন্য ব্যবহৃত হয়। এখানে, আমরা0, 0, 0, 400এর মাধ্যমে উল্লম্ব গ্রেডিয়েন্ট তৈরি করেছি।addColorStop(): এটি গ্রেডিয়েন্টের বিভিন্ন রঙের স্টপ নির্ধারণ করতে ব্যবহৃত হয়। প্রথম স্টপেrgba(255, 99, 132, 0.2)এবং দ্বিতীয় স্টপেrgba(75, 192, 192, 0.2)রঙ ব্যবহার করা হয়েছে।backgroundColor: gradient: গ্রেডিয়েন্ট ফিলকে চার্টের ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয়েছে।
2. Pattern Fill (প্যাটার্ন ফিল)
Pattern Fill দিয়ে আপনি চার্টে প্যাটার্ন যোগ করতে পারেন, যা চার্টের বর্গ, বারের বা অন্য শেপের অভ্যন্তরীণ রঙ হিসেবে প্রদর্শিত হবে। এটি বিশেষত জ্যামিতিক প্যাটার্ন বা ছবি ব্যবহার করতে সাহায্য করে।
উদাহরণ: Bar Chart এর Pattern Fill
JavaScript (script.js):
const ctx = document.getElementById('myChart').getContext('2d');
// Create an image pattern
const img = new Image();
img.src = 'https://www.chartjs.org/img/chartjs-logo.svg'; // Example image
img.onload = function() {
const pattern = ctx.createPattern(img, 'repeat'); // Create a pattern
const myChart = new Chart(ctx, {
type: 'bar', // Bar chart
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: pattern, // Use the image pattern as background
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
};
ব্যাখ্যা:
createPattern(): এই ফাংশনটি একটি ইমেজ বা ক্যানভাস প্যাটার্ন তৈরি করতে ব্যবহৃত হয়।- এখানে,
'repeat'অপশনটি ব্যবহার করা হয়েছে, যার মাধ্যমে ইমেজটি বারবার পুনরাবৃত্তি হবে।
- এখানে,
backgroundColor: pattern: তৈরি করা প্যাটার্নটি ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয়েছে।
3. Pattern Fill এর অন্যান্য কাস্টমাইজেশন
আপনি ইমেজের পরিবর্তে canvas অথবা বিভিন্ন প্যাটার্ন তৈরি করে প্যাটার্ন ফিল ব্যবহার করতে পারেন। এটি Chart.js-এর createPattern() ফাংশনের মাধ্যমে করা সম্ভব।
উদাহরণ: Custom Pattern Using Canvas
const ctx = document.getElementById('myChart').getContext('2d');
// Create a custom pattern with canvas
const canvas = document.createElement('canvas');
const patternCtx = canvas.getContext('2d');
// Draw a pattern on the canvas
canvas.width = 20;
canvas.height = 20;
patternCtx.fillStyle = 'rgba(255, 99, 132, 0.2)';
patternCtx.fillRect(0, 0, 10, 10);
patternCtx.fillStyle = 'rgba(54, 162, 235, 0.2)';
patternCtx.fillRect(10, 10, 10, 10);
// Create pattern from canvas
const pattern = ctx.createPattern(canvas, 'repeat');
const myChart = new Chart(ctx, {
type: 'bar', // Bar chart
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: pattern, // Use the custom pattern
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
ব্যাখ্যা:
- Custom Pattern: এখানে একটি ক্যানভাস তৈরি করা হয়েছে এবং সেই ক্যানভাসে একটি কাস্টম প্যাটার্ন আঁকা হয়েছে।
createPattern(): ক্যানভাসে আঁকা প্যাটার্নকে Chart.js চার্টের ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয়েছে।
সারাংশ
Chart.js এ Gradient Fill এবং Pattern Fill ব্যবহার করে আপনি চার্টের ভিতরের রঙ এবং শেপকে কাস্টমাইজ করতে পারেন। এই দুটি ফিচার চার্টকে আরও আকর্ষণীয় এবং ভিজ্যুয়ালি দৃষ্টিনন্দন করে তোলে:
- Gradient Fill ব্যবহার করে আপনি গ্রেডিয়েন্ট রঙ প্রয়োগ করতে পারেন, যা চার্টে উজ্জ্বলতা বা ধীরে ধীরে রঙের পরিবর্তন সৃষ্টি করে।
- Pattern Fill ব্যবহার করে আপনি চার্টের রঙের পরিবর্তে একটি ইমেজ বা কাস্টম প্যাটার্ন যোগ করতে পারেন, যা বিশেষ করে কাস্টম ডিজাইন বা গ্রাফিক্যাল উপস্থাপনার জন্য উপকারী।
এই কাস্টম ফিল প্রোপার্টিগুলি আপনাকে আপনার চার্টের ভিজ্যুয়াল অভিজ্ঞতা বাড়াতে সাহায্য করবে।
Read more
